<template>
    <div class="main-content">
        <div style="width: 80%; background-color: white; margin: 30px auto; border-radius: 20px">
            <div style="padding-bottom: 10px">
                <div style="font-size: 18px; color: #000000FF; line-height: 80px; border-bottom: #cccccc 1px solid;">
                    <div style="margin-left: 20px">我的订单（{{ ordersData.length }} 个）</div>
                </div>
                <el-empty
                    v-if="ordersData && ordersData.length <= 0"
                    image-size="300"
                    description="您还没将商品加入购物车，请加入购物车后再查询"
                ></el-empty>
                <div v-else style="margin: 20px 0; padding: 0 50px">
                    <div class="table">
                        <el-table :data="ordersData" strip>
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-table :data="props.row.cartData" strip style="width: 90%;margin: 0 auto">
                                        <el-table-column label="商品图片" width="120px">
                                            <template v-slot="scope">
                                                <el-image style="width: 80px; height: 60px; border-radius: 3px"
                                                          v-if="scope.row.goodsImg"
                                                          :src="scope.row.goodsImg"
                                                          :preview-src-list="[scope.row.goodsImg]"></el-image>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="goodsName" label="商品名称"
                                                         :show-overflow-tooltip="true">
                                            <template v-slot="scope">
                                                <a :href="'/front/detail?id=' + scope.row.goodsId">{{
                                                    scope.row.goodsName
                                                    }}</a>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="businessName" label="店铺名称">
                                            <template v-slot="scope">
                                                <a :href="'/front/business?id=' + scope.row.businessId">{{
                                                    scope.row.businessName
                                                    }}</a>
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="goodsPrice" label="商品价格">
                                            <template v-slot="scope">
                                                {{ scope.row.goodsPrice }} / {{ scope.row.goodsUnit }}
                                            </template>
                                        </el-table-column>
                                        <el-table-column prop="num" label="商品数量"></el-table-column>
                                        <el-table-column prop="price" label="订单总价"></el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column prop="orderId" label="订单编号"></el-table-column>
                            <el-table-column prop="num" label="商品数量"></el-table-column>
                            <el-table-column prop="price" label="订单总价"></el-table-column>
                            <el-table-column prop="username" label="收货人"></el-table-column>
                            <el-table-column prop="useraddress" label="收货地址"></el-table-column>
                            <el-table-column prop="phone" label="联系电话"></el-table-column>
                            <el-table-column prop="status" label="订单状态"></el-table-column>
                            <el-table-column label="操作" align="center" width="180">
                                <template v-slot="scope">
                                    <el-button size="mini" type="danger" plain @click="del(scope.row.id)">删除
                                    </el-button>
                                    <el-dropdown size="mini" style="margin-left: 10px" @command="handleCommand">
                                        <el-button type="primary" size="mini" plain>
                                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown" >
                                            <el-dropdown-item divided :command="{...scope.row,type: 'addComment'}"
                                            v-if="scope.row.status === '已完成'"
                                            >
                                                评价
                                            </el-dropdown-item>
                                            <el-dropdown-item :command="{orderId: scope.row.orderId,type: 'pay'}"
                                                              v-if="scope.row.status === '待付款'">
                                                付款
                                            </el-dropdown-item>
                                            <el-dropdown-item :command="{id: scope.row.id,type: 'update'}"
                                                              v-if="scope.row.status === '待收货'">
                                                确认收货
                                            </el-dropdown-item>
                                            <el-dropdown-item :command="{type: 'null'}">
                                                无
                                            </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </template>
                            </el-table-column>
                        </el-table>

                        <div class="pagination" style="margin-top: 20px">
                            <el-pagination
                                    background
                                    @current-change="handleCurrentChange"
                                    :current-page="pageNum"
                                    :page-sizes="[5, 10, 20]"
                                    :page-size="pageSize"
                                    layout="total, prev, pager, next"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog title="请输入评价内容" :visible.sync="fromVisible" width="40%" :close-on-click-modal="false"
                   destroy-on-close>
            <el-form :model="form" label-width="100px" style="padding-right: 50px" :rules="rules" ref="formRef">
                <el-form-item label="评价内容" prop="username">
                    <el-input type="textarea" v-model="form.content" placeholder="请输入评价内容"></el-input>
                </el-form-item>
            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="fromVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>

export default {

    data() {
        return {
            user: JSON.parse(localStorage.getItem('xm-user') || '{}'),
            ordersData: [],
            pageNum: 1,   // 当前的页码
            pageSize: 10,  // 每页显示的个数
            total: 0,
            fromVisible: false,
            rules: {
                content: [
                    {required: true, message: '请输入评论', trigger: 'blur'},
                ]
            },
            form: {}
        }
    },
    mounted() {
        this.loadOrders(1)
    },
    // methods：本页面所有的点击事件或者其他函数定义区
    methods: {
        handleCommand(row) {
            if (row.type === 'addComment') {
                this.addComment(row)
            } else if (row.type === 'updateStatus') {
                this.updateStatus({id: row.id, status: '已完成'})
            } else if (row.type === 'pay') {
                this.pay(row.orderId)
            }
        },
        pay(orderId) {
            this.$request.get(`/alipay/pay?orderId=${orderId}`).then(res => {
                if (res.code === '200') {
                    this.$router.push({
                        path: "/front/pay/",
                        query: {
                            form: res.data
                        }
                    });
                } else {
                    this.$message.error(res.msg)
                }
            })

        },
        save() {
            let data = {
                userId: this.user.id,
                businessId: this.form.businessId,
                goodsId: this.form.goodsId,
                content: this.form.content,
            }
            this.$request.post('/comment/add', data).then(res => {
                if (res.code === '200') {
                    this.$message.success('评价成功')
                    this.fromVisible = false
                    this.updateStatus(this.form, '已评价')
                    this.form = {}
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        addComment(row) {
            this.fromVisible = true
            this.form = row
        },
        loadOrders(pageNum) {
            if (pageNum) this.pageNum = pageNum
            this.$request.get('/orders/selectPage', {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                }
            }).then(res => {
                if (res.code === '200') {
                    this.ordersData = res.data?.list
                    this.total = res.data?.total
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        navTo(url) {
            location.href = url
        },
        del(id) {
            this.$request.delete('/orders/delete/' + id).then(res => {
                if (res.code === '200') {
                    this.$message.success('删除成功')
                    this.loadOrders(1)
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handleCurrentChange(pageNum) {
            this.loadOrders(pageNum)
        },
        updateStatus(row) {
            this.$request.put('/orders/update', row).then(res => {
                if (res.code === '200') {
                    this.$message.success('操作成功')
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    }
}
</script>